<template>
  <canvas class="ruler"
          ref="canvasRef"
          @click="handleClick"
          @mouseenter="handleEnter"
          @mousemove="handleMove"
          @mouseleave="handleLeave"
  />
</template>

<script>
import { drawHorizontalRuler, drawVerticalRuler } from "../../../../../utils/ruler";
import { defineComponent, onMounted, ref, watch, } from "vue";

const getValueByOffset = (offset, start, scale) => Math.round(start + offset / scale);

export default defineComponent({
  name: "ruler-canvas",
  props: {
    vertical: Boolean,
    start: Number,
    scale: Number,
    width: Number,
    height: Number,
    canvasConfigs: Object,
    selectStart: Number,
    selectLength: Number,
    isShowReferLine: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["onAddLine", "onIndicatorShow", "onIndicatorMove", "onIndicatorHide"],
  setup(props, ctx) {
    const canvasRef = ref();
    const canvasContext = ref({});
    watch(() => props.start, s => {
      drawRuler();
    });
    watch(() => props.width, s => {
      updateCanvasContext();
      drawRuler();
    });
    watch(() => props.height, s => {
      updateCanvasContext();
      drawRuler();
    });
    const initCanvasRef = () => {
      canvasContext.value = canvasRef.value.getContext("2d");
    };
    const updateCanvasContext = () => {
      const { ratio } = props.canvasConfigs;
      canvasRef.value.width = props.width * ratio;
      canvasRef.value.height = props.height * ratio;

      const ctx = canvasRef.value.getContext("2d");
      ctx.font = `${12 * ratio}px -apple-system,
                "Helvetica Neue", ".SFNSText-Regular",
                "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif`;
      ctx.lineWidth = 1;
      ctx.textBaseline = "middle";
    };
    const drawRuler = () => {
      const option = {
        scale: props.scale,
        width: props.width,
        height: props.height,
        canvasConfigs: props.canvasConfigs
      };
      if (props.vertical) {
        drawVerticalRuler(canvasContext.value, props.start, {
          y: props.selectStart, height: props.selectLength,
        }, option);
      } else {
        drawHorizontalRuler(canvasContext.value, props.start, {
          x: props.selectStart, height: props.selectLength,
        }, option);
      }
    };
    const handleClick = (e) => {
      if (!props.isShowReferLine) {
        return;
      }
      const offset = props.vertical ? e.offsetY : e.offsetX;
      const value = getValueByOffset(offset, props.start, props.scale);
      ctx.emit("onAddLine", value);
    };
    const handleEnter = (e) => {
      if (!props.isShowReferLine) {
        return;
      }
      const offset = props.vertical ? e.offsetY : e.offsetX;
      const value = getValueByOffset(offset, props.start, props.scale);
      ctx.emit("onIndicatorShow", value);
    };
    const handleMove = (e) => {
      if (!props.isShowReferLine) {
        return;
      }
      const offset = props.vertical ? e.offsetY : e.offsetX;
      const value = getValueByOffset(offset, props.start, props.scale);
      ctx.emit("onIndicatorMove", value);
    };
    const handleLeave = () => {
      if (!props.isShowReferLine) {
        return;
      }
      ctx.emit("onIndicatorHide");
    };
    onMounted(() => {
      initCanvasRef();
      updateCanvasContext();
      drawRuler();
    });
    return {
      canvasRef,
      canvasContext,
      initCanvasRef,
      updateCanvasContext,
      drawRuler,
      handleClick,
      handleLeave,
      handleEnter,
      handleMove,
    };
  }
});
</script>

<style scoped>

</style>